<template>
  <view>
    <view class="top">
      <!-- 占位 -->
    </view>
      <view class="user_my" @click="gotoWhere">
        <view class="avatar_img">
          <image :src="userMessage.avatarUrl" class="user_image"></image>
        </view>
      <view class="user_nickName" style="font-size: 32rpx;" v-if="userMessage.nickName">
        {{userMessage.nickName}}
      </view>
      <view class="gender" v-if="userMessage.gender.length !== 0">
        <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/b1995f00-7e71-48f6-9a9f-1ad9fb73f9e8.png" v-if="userMessage.gender == 0"></image>
        <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/42b519be-6dfe-4296-9631-fa4700ee97c3.png" v-else-if="userMessage.gender == 1"></image>
      </view>
      <uni-icons type="forward" size="60rpx" class="gear" color="#7a7979"></uni-icons>
    </view>
    <view class="user_exchange">
      <view class="my_shelves" @click="gotoMySell">
        <uni-icons type="paperplane" size="60rpx" color="#30dff9" style="margin-right: 20rpx;"></uni-icons>
        <view class="text" style="font-size: 28rpx;">
          我在嘉卖的货物
        </view>
      </view>
      <view class="to_shelves" @click="gotoSell">
        <uni-icons type="shop" size="60rpx" color="#30dff9" style="margin-right: 20rpx;"></uni-icons>
        <view class="text" style="font-size: 28rpx;">
         我要在嘉卖货
        </view>
      </view>
    </view>
    <view class="serve">
      <view class="customer">
        <uni-icons type="person-filled" size="60rpx" color="#30dff9" style="margin-right: 20rpx;"></uni-icons>
        <view class="text" style="font-size: 28rpx;">
         客服
        </view>
        <button :open-type="contact" class="transparent_button" @click="changeContact"></button>
      </view>
      <view class="feedback" @click="gotoFeedback">
        <uni-icons type="loop" size="60rpx" color="#30dff9" style="margin-right: 20rpx;"></uni-icons>
        <view class="text" style="font-size: 28rpx;">
         反馈
        </view>
      </view>
      <!-- 分享 -->
      <view class="share">
        <uni-icons type="redo" size="60rpx" color="#30dff9" style="margin-right: 20rpx;"></uni-icons>
        <view class="text" style="font-size: 28rpx;">
        分享
        </view>
        <button class="transparent_button" open-type="share" >分享</button>
      </view>
    </view>
<!--    玩动画啦
    <view :animation="animationData" class="animation">
      <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/194ff6ad-261b-4d25-8390-d49cbbfcde11.jpg"></image></view>
    <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/3166a0f3-ff08-4b4f-bde4-2e23f94b5c98.jpg"></image></view>
    <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/578ecda7-2fd1-40e7-a11b-e876b69d3c19.jpg"></image></view>
     <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/1755372c-bddf-40d8-aeb7-17b135fabc9c.jpg"></image></view>
      <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/94266b9d-d1b6-4f44-812e-e2eb904f66e9.jpg"></image></view>
      <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/94017781-3bf2-4b67-a580-5b87ec565b94.jpg"></image></view>
     <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/1755372c-bddf-40d8-aeb7-17b135fabc9c.jpg"></image></view>
      <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/913401f1-6e46-4212-93c7-87e995c7f75c.jpg"></image></view>
      <view><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/101ee7c5-b359-495f-89e0-7c90abfb8833.jpg"></image></view>
    </view>
    <view class="haizeimi">海贼迷们在哪里</view>
    <view class="jieli" :style="style" @click="dianjieli">介里介里点介里</view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userMessage: {
          avatarUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/eece9928-800c-4f9e-bc7c-700e317e5840.png",
          nickName: "点击登录/注册",
          gender: 1
        },
        contact: ''
        // animationData: {},
        // style: 'color: #3ddff9'
      };
    },
    onShareAppMessage(res) {
      return {
        title: "在嘉易物,更有温度",
        path: "/pages/exchange/exchange",
        imageUrl: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/9579043b-6b69-4aa2-acea-8f442d32a8a0.png",
        
      }
    },
    onShow() {
      this.getUserMessage()
      uni.setStorageSync('jiayi_exchange', "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/d621cd0d-285e-44f1-966c-bfd04b648d84.jpg")
    },
    // onShow:function() {
    //       var animation = uni.createAnimation({
    //           duration: 220000,
    //           timingFunction: 'linear',
    //       })
    //       this.animation = animation
    //       animation.rotateY(7200).step()
    //       this.animationData = animation.export()
    // }
    // ,
    methods: {
      getCode() {
      	return new Promise((resolve, reject) => {
      		uni.login({
      			provider: "weixin",
      			success: (e) => {
      				resolve(e)
      			},
      			fail: (err) => {
      				reject(new Error("获取code失败"))
      			}
      		})
      	})
      },
      getOpenID(code) {
      	return uniCloud.callFunction({
      		name: "wxLogin",
      		data: {
      			code
      		}
      	})
      },
      // 登录与修改
      gotoWhere() {
        const token = uni.getStorageSync('jiayi_token')
        if(token) {
          uni.navigateTo({
            url: '/subpkg/set/set'
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      getUserMessage() {
        const token = uni.getStorageSync('jiayi_token')
        this.userMessage = {
          "nickName": uni.getStorageSync('jiayi_nickname'),
          "avatarUrl": uni.getStorageSync('jiayi_avatarUrl'),
          "gender": uni.getStorageSync('jiayi_gender')
        }
        if(token) {
          this.getCode().then(e => {
            return this.getOpenID(e.code)
          }).then(e => {
            const {
            			openid,
            			token,
            		} = e.result;
            uni.setStorageSync('jiayi_openid', openid)
           	uni.setStorageSync('jiayi_token', token)
            uniCloud.callFunction({
              name: 'getUser',
              data: {openID: openid},
              success: (res) => {
                // 获取用户信息成功后处理数据
                const data = res.result.data[0]
               uni.setStorageSync('jiayi_nickname',data.nickName)
               uni.setStorageSync('jiayi_avatarUrl',data.avatarUrl)
               uni.setStorageSync('jiayi_gender',data.gender)
               uni.setStorageSync('jiayi_avatarUrlArray',data.avatarUrlArray)
               uni.setStorageSync('jiayi_nickNameArray',data.nickNameArray)
                this.userMessage = {
                      "openID": data.openID,
                      "nickName": data.nickName,
                      "avatarUrl": data.avatarUrl,
                      "collection": data.collection,
                      "gender": data.gender,
                      "support": data.support
                }
              }
            })
          })
        } else {
          this.userMessage.avatarUrl = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/eece9928-800c-4f9e-bc7c-700e317e5840.png"
          this.userMessage.nickName = "点击登录/注册"
          this.userMessage.gender = 2
        }
      },
      // dianjieli() {
      //   switch(this.style) {
      //     case 'color: #3ddff9': this.style = 'color: #fc00ff'; break;
      //     case 'color: #fc00ff': this.style = 'color: #ff0000'; break;
      //     case 'color: #ff0000': this.style = 'color: #ff7800'; break;
      //     case 'color: #ff7800': this.style = 'color: #fffc00'; break;
      //     case 'color: #fffc00': this.style = 'color: #00ff12'; break;
      //     case 'color: #00ff12': this.style = 'color: #00b50d'; break;
      //     case 'color: #00b50d': this.style = 'color: #3ddff9'; break;
      //   }
      // },
      gotoMySell() {
        const token = uni.getStorageSync('jiayi_token')
        if(token) {
          uni.navigateTo({
            url: '/subpkg/my-sell/my-sell'
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      gotoSell() {
        const token = uni.getStorageSync('jiayi_token')
        if(token) {
          uni.navigateTo({
            url: '/subpkg/sell/sell'
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      changeContact() {
        const token = uni.getStorageSync('jiayi_token')
        if(token) {
          this.contact = "contact"
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      gotoFeedback() {
        const token = uni.getStorageSync('jiayi_token')
        if(token) {
          uni.navigateTo({
            url: '/subpkg/feedback/feedback'
          })
        } else {
          uni.navigateTo({
            url: '/subpkg/login/login'
          })
        }
      },
      // 分享功能需等小程序上传后开发
      // share() {
      //   uni.share({
      //     provider: "weixin",
      //     	scene: "WXSceneSession",
      //     	type: 1,
      //     	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
            // provider: 'weixin',
            // scene: "WXSceneSession",
            // type: 5,
            // imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8638907f-6b78-40ed-8ab5-64a825c57ef1/98562f7c-bdba-49a5-86bc-01c6c0300b0f.png',
            // title: '欢迎体验嘉园有易小程序',
            // miniProgram: {
            //     id: '	gh_ecf22b219030',
            //     path: '/pages/exchange/exchange'
            //     type: 0,
            //     webUrl: 'http://uniapp.dcloud.io'
            // },
      //       success: () => {
      //        console.log('yes'); 
      //       },
      //       fail: () => {
      //        console.log('no'); 
      //       }
      //   });
      // }
    }
  }
</script>

<style lang="scss">
  page {
    background: linear-gradient(to bottom, #9bf9ff, #f4f4f6);
  }
  .top {
    width: 100%;
    height: 80rpx;
  }
  .user_my {
    position: relative;
    display: flex;
    width: 100%;
    margin-top: 80rpx;
    padding-left: 60rpx;
    .avatar_img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 100%;
      overflow: hidden;
      .user_image {
        width: 100%;
        height: 100%;
      }
    }
    .user_nickName {
      margin-top: 26rpx;
      margin-left: 30rpx;
      color: #5a5a5a;
    }
    .gender {
      margin-top: 30rpx;
      margin-left: 20rpx;
      width: 36rpx;
      height: 36rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .gear {
      position: absolute;
      top: 26rpx;
      right: 90rpx;
    }
  }
.user_exchange {
      display: flex;
      width: 700rpx;
      height: 120rpx;
      margin-top: 90rpx;
      margin-left: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
      .text {
        text-align: center;
        color: #30dff9;
      }
      .my_shelves {
      width: 50%;
      margin-top: 10rpx;
      padding-left: 20rpx;
      text-align: center;
      border-right: 1px solid #d0d0d0;
      }
      .to_shelves {
        width: 50%;
        margin-top: 10rpx;
        padding-left: 20rpx;
        text-align: center;
      }
    }
    .serve {
      display: flex;
      width: 700rpx;
      height: 120rpx;
      margin-top: 100rpx;
      margin-left: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
      .text {
        text-align: center;
        color: #30dff9;
      }
      .customer {
        position: relative;
        width: 33%;
        margin-top: 10rpx;
        padding-left: 20rpx;
        text-align: center;
        border-right: 1px solid #d0d0d0;
        .transparent_button {
          position: absolute;
          top: 0;
          z-index: 999;
          width: 100%;
          height: 100%;
          margin-left: -20rpx;
          margin-top: -5rpx;
          opacity: 0;
        }
      }
      .feedback {
        width: 33%;
        margin-top: 10rpx;
        padding-left: 20rpx;
        text-align: center;
        border-right: 1px solid #d0d0d0;
      }
      .share {
        position: relative;
        width: 33%;
        margin-top: 10rpx;
        padding-left: 20rpx;
        text-align: center;
        .transparent_button {
          position: absolute;
          top: 0;
          z-index: 999;
          width: 100%;
          height: 100%;
          margin-left: -20rpx;
          margin-top: -5rpx;
          opacity: 0;
        }
      }
    }
    // .animation {
    //   perspective: -2500;
    //   position: relative;
    //   transform-style: preserve-3d;
    //   :nth-child(1) {
    //     transform: translateZ(360rpx);
    //   }
    //   :nth-child(2) {
    //     transform: rotateY(60deg) translateZ(360rpx);
    //   }
    //   :nth-child(3) {
    //     transform: rotateY(120deg) translateZ(360rpx);
    //   }
    //   :nth-child(4) {
    //     transform: rotateY(180deg) translateZ(360rpx);
    //   }
    //   :nth-child(5) {
    //     transform: rotateY(240deg) translateZ(360rpx);
    //   }
    //   :nth-child(6) {
    //     transform: rotateY(300deg) translateZ(360rpx);
    //   }
    //   :nth-child(7) {
    //     transform: rotateY(30deg) translateZ(120rpx);
    //   }
    //   :nth-child(8) {
    //     transform: rotateY(150deg) translateZ(120rpx);
    //   }
    //   :nth-child(9) {
    //     transform: rotateY(270deg) translateZ(120rpx);
    //   }
    //   view {
    //     position: absolute;
    //     top: 150rpx;
    //     left: 50%;
    //     transform: translateX(-50%);
    //     margin: 75rpx auto;
    //     width: 300rpx;
    //     height: 168.9rpx;
    //     image {
    //       width: 300rpx;
    //       height: 168.9rpx;
    //     }
    //   }
    // }
    .haizeimi {
      position: absolute;
      text-align: center;
      width: 100%;
      height: 40rpx;
      bottom: 130rpx;
      font-size: 40rpx;
      color: #3ddff9;
    }
    .jieli {
      position: absolute;
      text-align: center;
      width: 100%;
      height: 40rpx;
      bottom: 50rpx;
      font-size: 30rpx;
    }
</style>
